<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>产品详细页</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/common.css" />
</head>
<body>
    <!--顶部栏目-->
    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" id="header">
        <div class="container">
            <div class="row">
                <div id="backToPrevBtn" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-circle-arrow-left" href="#"></a>
                </div>
                <div id="logo" class="col-xs-6 text-while">
                    <span>your logo</span>
                </div>
                <div id="btnUser" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-user" href="User.html"></a>
                </div>
                <div id="btnShoppingCart" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-shopping-cart" href="ShoppingCart.html"></a>
                </div>
            </div>
        </div>
    </header>
    <!--顶部栏目 END-->

    <!--内容-->
    <div class="wrapper">
        <div class="banner" id="banner" style="">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:100%;">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="" />
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="" />
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="" />
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
        <div class="container">
            <div class="info" id="productInfo">
                <div style="margin-top: 10px;">
                    <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>

                    <p>现价： <strong class="text-danger">¥499.00</strong></p>

                    <p class="text-muted">运费： 快递(EMS)¥12.0</p>
                </div>
            </div>
            <!--the selection for select product type, example color and size-->
            <div id="AttributeSelection" class="selection">
                <div class="select-item row" data-select="color" data-selection="group">
                    <dl class="items clearfix">
                        <dt class="item title">颜色</dt>
                        <dd class="item desc">
                            <ul class="no-list-bor list-prop clearfix">
                                <li><a href="#" data-selection="btn">Red</a></li>
                                <li><a href="#" data-selection="btn">Red</a></li>
                                <li><a href="#" data-selection="btn">Red</a></li>
                                <li><a href="#" data-selection="btn">Red</a></li>
                                <li><a href="#" data-selection="btn">Red</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
                <div class="select-item row" data-select="size" data-selection="group">
                    <dl class="items clearfix">
                        <dt class="item title">尺寸</dt>
                        <dd class="item desc">
                            <ul class="no-list-bor list-prop clearfix">
                                <li><a href="#" data-selection="btn">170/76A(W29/L30</a></li>
                                <li><a href="#" data-selection="btn">170/76A(W29/L30</a></li>
                                <li><span>170/76A(W29/L30</span></li>
                                <li><a href="#" data-selection="btn">170/76A(W29/L30</a></li>
                                <li><a href="#" data-selection="btn">170/76A(W29/L30</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
                <div class="select-item row" data-select="count">
                    <dl class="items clearfix">
                        <dt class="item title">数量</dt>
                        <dd class="item desc">
                            <div id="count" class="row">
                                <div class="fl">
                                    <a id="btnMinus" class="btnCount"><i
                                        class="glyphicon glyphicon-minus"></i></a>
                                </div>
                                <input type="number" id="countVla" class="fl" value="1" />
                                <div class="fl">
                                    <a id="btnPlus" class="btnCount"><i
                                        class="glyphicon glyphicon-plus"></i></a>
                                </div>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
            <!--selection end-->
            <!-- Add to shoppingCart button -->
            <div class="" style="padding: 10px 0;">
                <a href="#" class="btn btn-primary">加入购物车</a>
                <a href="#" class="btn btn-danger">立即购买</a>
            </div>
            <div class="">
                <p>商品详情</p>
                <p>
                    潮流水洗
                    潮流感的水洗设计，尽显街头的牛仔范儿，让你在夏日中展现自己与众不同的品味。
                </p>
            </div>
        </div>
    </div>
    <!--内容 END-->

    <!--脚部导航-->
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-4"><a href="#" class="text-n">户首页页</a></div>
                <div class="col-xs-4"><a href="#">会员中心</a></div>
                <div class="col-xs-4"><a href="#">品牌介绍</a></div>
            </div>
        </div>
    </footer>
    <!--脚部导航 END-->
</body>
</html>
<script src="js/jquery.v1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/selection.js"></script>
<script src="js/count.js"></script>
